<script setup lang="ts">
import { ElButton } from "element-plus";
import {
  btnName,
  hour,
  minute,
  second,
  millisecond,
  timeText,
  handleChallenge,
  handleReset,
} from "./TimeFunc";
</script>

<template>
  <div :text="timeText" class="time-box">
    <div class="time-show">{{ hour }}</div>
    <div class="time-show">:</div>
    <div class="time-show">{{ minute }}</div>
    <div class="time-show">:</div>
    <div class="time-show">{{ second }}</div>
    <div class="time-show">:</div>
    <div class="time-show">{{ millisecond }}</div>
  </div>
  <div>
    <el-button type="primary" @click="handleChallenge">{{ btnName }}</el-button>
    <el-button @click="handleReset">重新挑战</el-button>
  </div>
</template>

<style lang="scss">
@import url(./Time.scss);
</style>
